<template>
    <div class="pureNewLogContent accQuery realTimeGoods" :style="{width:contentWidth}">
        <div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
            <div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
                <i class="icon iconfont">&#xe7d8;</i>
                当前位置/游戏内分析/
                <span>{{title}}</span>
            </div>
        </div>
        <div class="choose_dialog fadeInDown animated">
            <div class="block">
                <el-form :model="form" :rules="rules" ref="form" class="demo-form-inline" :inline="true">
                    <div class="import">						
                        <el-form-item :label-width="formLabelWidth" class="long">
							<el-radio-group v-model="form.dateType" @change="getDateRangeByDateType">
								<el-radio :label="7">近7天</el-radio>
								<el-radio :label="15">近15天</el-radio>
								<el-radio :label="30">近30天</el-radio>
								<el-radio :label="0">自定义</el-radio>
							</el-radio-group>
							<el-date-picker
									v-model="date"
									type="daterange"
									align="left"
									placeholder="选择日期范围"
									@change='dateChange'
									:picker-options="pickerOptions">
							</el-date-picker>
                        </el-form-item>
                        <el-form-item label="平台" :label-width="formLabelWidth" prop="platform">
                            <el-select v-model="form.platform" filterable placeholder="请选择平台" @change="updatePlatform">
                                <el-option v-for="(item,index) in form.platformItmes" :label="item.label" :value="item.value" :key='index'></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="渠道" :label-width="formLabelWidth" prop="channel">
                            <el-select v-model="form.channel" filterable placeholder="请选择渠道" @change="updateChannel">
                                <el-option v-for="(item,index) in form.channelItems" :label="item.label" :value="item.value" :key='index'></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="区服" :label-width="formLabelWidth" prop="server">
                            <el-select v-model="form.server" filterable placeholder="请选择区服" @change="updateServer">
                                <el-option v-for="(item,index) in form.serverItmes" :label="item.label" :value="item.value" :key='index'></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户类型" :label-width="formLabelWidth" prop='userType'>
                            <el-select v-model="form.userType" filterable placeholder="请选择用户类型">
                                <el-option v-for="(val,key) in form.userTypes" :label="val.label" :value="val.value" :key='key'></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item  class='conmit'>
                        <el-button type="primary"  icon="search" @click="search('form')" :disabled="searchable">搜索</el-button>
                        <el-button @click="reset('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="right_content">
			<el-collapse v-model="activeName" accordion>
				<el-collapse-item name='1' title="活动参与率">
					<el-select v-model="form.activities" multiple placeholder="活动" @change="selectActivityType">
						<el-option v-for="(val,key) in form.activityItems" :label="val.label" :value="val.value" :key='val.label'></el-option>
					</el-select>
					<el-tabs type="border-card" active-name="1" @tab-click="changeActive">
						<el-tab-pane label="任务活动" name="1">
							<div class="echartsBlock" id="joinRateTaskCharts" style="width:100%;height:400px;"></div>
						</el-tab-pane>
						<el-tab-pane label="副本活动" name="2">
							<div class="echartsBlock" id="joinRateSubTaskCharts" style="width:100%;height:400px;"></div>
						</el-tab-pane>
					</el-tabs>

					<div class="realTimeServiceTable">
						<div class="realTimeServiceTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
							<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">查询结果</span>
							<el-button type="primary" size="mini" class="excel"  @click="excel(activityAnalysisTableHead,activityAnalysisTableDataAll,'游戏内分析-活动分析')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
								<i class="icon iconfont">&#xe7f0;</i> 导出excel
							</el-button>
						</div>
						<div class="realTimeServiceTableBody">
							<template>
								<el-table
										v-loading="loading"
										element-loading-text="拼命加载中"
										:data="activityAnalysisTableData"
										border
										:style="{width:tableWidth}"
										:default-sort = "{prop: 'time', order: 'descending'}"
								>
									<el-table-column sortable align="center"
													v-for="col in activityAnalysisTableHead"
													:key="col.prop"
													:prop="col.prop" :label="col.label" :width="col.width">
									</el-table-column>
								</el-table>
							</template>
						</div>
						<div class="block realTimeServicePage">
							<el-pagination
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="currentPage"
									:page-sizes="pageSizes"
									:page-size="pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="dataTotal">
							</el-pagination>
						</div>
					</div>
				</el-collapse-item>

				
				<el-collapse-item name='2' title="人均参与次数">
					<el-select v-model="form.activities2" multiple placeholder="活动" @change="selectActivityType2">
						<el-option v-for="(val,key) in form.activityItems" :label="val.label" :value="val.value" :key='val.label'></el-option>
					</el-select>
					<el-tabs type="border-card" active-name="1" @tab-click="changeActive2">
						<el-tab-pane label="任务活动" name="1">
							<div class="echartsBlock" id="joinRateAvgTaskCharts" style="width:100%;height:400px;"></div>
						</el-tab-pane>
						<el-tab-pane label="副本活动" name="2">
							<div class="echartsBlock" id="joinRateAvgSubTaskCharts" style="width:100%;height:400px;"></div>
						</el-tab-pane>
					</el-tabs>
				</el-collapse-item>
			</el-collapse>
			
            
        </div>
        <a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
    </div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./activityAnalysis.styl"></style>
<script src="./activityAnalysis.js"></script>
